<template>
  <img :style="styleProps" class="l-image-component" @click.prevent="handleClick" :src="src" />
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import useComponentCommon from '../hooks/useComponentCommon';
import {
  transformToComponentProps,
  imageDefaultProps,
  imageStylePropsNames
} from '../defaultProps';
const defaultProps = transformToComponentProps(imageDefaultProps);

// array that contains style props
export default defineComponent({
  name: 'l-image',
  props: {
    ...defaultProps
  },
  setup(props) {
    // 重用并且简化
    // 抽离并且获得 styleProps
    const { styleProps, handleClick } = useComponentCommon(props, imageStylePropsNames);
    // 确保 styleProps 只包含样式相关的属性
    const filteredStyleProps = Object.keys(styleProps).reduce(
      (acc, key) => {
        if (imageStylePropsNames.includes(key)) {
          acc[key] = styleProps[key];
        }
        return acc;
      },
      {} as Record<string, string | number>
    );
    return {
      styleProps: filteredStyleProps,
      handleClick
    };
  }
});
</script>
<style scoped>
.l-image-component {
  max-width: 100%;
  position: relative !important;
}
</style>
